<!--
 * @Descripttion: 评价
 * @Author: 王灿
 * @Date: 2019-12-18 13:53:25
 * @LastEditors: 
 * @LastEditTime : 2019-12-18 13:53:29
 -->
<template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow"/>
    <!-- 评价列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 评价人姓名 -->
        <el-table-column prop="evaluater" label="评价人"></el-table-column>
        <!-- 评价内容 -->
        <el-table-column label="评价内容">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.evaluateContent" />
          </template>
        </el-table-column>
        <!-- 商品名称 -->
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <!-- 回复内容 -->
        <el-table-column label="回复内容">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.reply || '--'" />
          </template>
        </el-table-column>
        <!-- 是否好评 -->
        <el-table-column label="是否好评">
            <template slot-scope="scope">
              <span>{{ scope.row.goodMark === 0 ? '差评' : '好评' }}</span>
          </template>
        </el-table-column>
        <!-- 星级 -->
        <el-table-column prop="starClass" label="星级"></el-table-column>
        <!-- 评价时间 -->
        <el-table-column prop="createAt" label="评价时间">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.createAt || '--'" />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 新增/编辑 -->
    <el-dialog
    :title="tabTitle"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="800px"
    >
      <evaluate-operate :row="tabRow" @addTableRow="onTableRow" @onChangeRefresh="onChangeRefresh"/>
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import EvaluateOperate from './evaluate-operate/index.vue'
import { getEvaluateList } from '@/api/order.js'
export default {
  name: 'Order',
  components: { JqTitle, JqTooltip, JqPage, EvaluateOperate },
  data() {
    return {
      title: { label: '评价管理', flag: true, searchFlag: false },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      isShow: false,
      tabTitle: '新增',
      tabRow: {},
      isRefresh: false
    }
  },
  created() {
    this.onGetEvaluateList()
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetEvaluateList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetEvaluateList()
    },
    // 监听刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetEvaluateList()
      }
    }
  },
  methods: {
    // 父子组件通讯 -- 新增商品
    onTableRow(data) {
      this.isShow = data.isShow
      this.tabTitle = '新增'
      this.tabRow = {}
      this.isRefresh = false
    },
    // 评价数据
    onGetEvaluateList() {
      getEvaluateList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 父子组件传值
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 编辑
    onEdit(row) {
      this.tabRow = row;
      this.isShow = true
      this.tabTitle = '编辑'
      this.isRefresh = false
    },
    // 刷新页面
    onChangeRefresh() {
      this.isShow = false
      this.tabTitle = '新增'
      this.tabRow = {}
      this.isRefresh = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>